<template>
  <div class="container">
    <el-tabs
      :value="editableTabsValue"
      type="card"
      @tab-click="clickTab"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        class="tab-pane"
        v-for="item in editableTabs"
        :closable="item.close"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        {{ item.content }}
        <div class="content" v-if="item.name==editableTabsValue">
          <router-view></router-view>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("tabs", {
      editableTabsValue: (state) => state.editableTabsValue,
      editableTabs: (state) => state.editableTabs,
    }),
  },
  methods: {
    clickTab(tab) {
      // 标签页点击事件
      let name = tab.paneName;
      this.change_tabs(name);
    },
    removeTab(targetName) {
      // 删除标签页
      this.remove_tab(targetName);
      // 跳转重新选中的路由
    },
    ...mapMutations("tabs", ["change_tabs", "remove_tab"]),
  },
  watch:{
    editableTabsValue:{
      handler(newVal){
        this.$router.replace(newVal)
      },
      immediate:true
    }
  }
};
</script>

<style scoped>
.container{
  height:100%;
}
.el-tabs{
  height:100%;
  width:100%;
  display: flex;
  flex-direction: column;
}
.el-tabs>:last-child{
  flex:1;
}
.tab-pane{
  height: 100%;
  overflow: auto;
  position:relative;
}
.content{
  width:100%;
  position:absolute;
}
</style>